<template>
    <div>
        <!-- <van-nav-bar
        title="学习日历"
        left-arrow
        @click-left="$router.go(-1)"
        />
        <van-calendar
            title="日历"
            :value="date"
            :min-date="minDate"
            :max-date="maxDate"
            :poppable="false"
            :show-confirm="false"
            :style="{ height: '500px' }"
            @confirm="confirms"
            ref="calendar"
            />
        
         -->

       <div class="calendar-wrap" style="positon:relative">
          <div class="month-year">{{showYear}}年{{showMonth+1}}月</div>
          <van-icon class="arrow" @click="deMonth" name="arrow" />
          <van-icon class="arrow-left" @click="adMonth" name="arrow-left" />
          <van-icon class="arrow-year" @click="deYear" name="arrow" />
          <van-icon class="arrow-year-1" @click="deYear" name="arrow" />
          <van-icon class="arrow-left-year-1" @click="adYear" name="arrow-left" />
          <van-icon class="arrow-left-year" @click="adYear" name="arrow-left" />
          <van-calendar class="calendar" ref="calendar"
              color="#399f0e"
              row-height="40" :min-date="minDate" 
              :max-date="maxDate" :default-date="nowDay" 
              :poppable="false"     :show-subtitle="false"
              :show-title="false" :show-mark="false" 
              :show-confirm="false" :formatter="formatterDay" @select="slecetDay"  @confirm="confirms"
          >
          <template  #bottom-info="item" >
          <span class="mark-green" v-if="item.bottomInfo==1"></span>
          <span class="mark-red" v-if="item.bottomInfo==2"></span>
          </template>
          </van-calendar>
        </div>

        <div class="list" v-for="(item,index) in list" :key="index">
            <p class="content"><span class="titles">{{item.course_title}}</span><span class="aa">[暂无回放]</span>{{item.live_time}}</p>
            <p class="title">{{item.title}}</p>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import { GetDate,GetYear } from "../../Request/http";

export default {
  data() {
    return {
      // date:'',
      // minDate:new Date(2000,0,1),
      // maxDate:new Date(),
      list:'',
      minDate: new Date(),
      maxDate: new Date(),
      defaultDate: new Date(),
      monthCont: 0,
      yearCont: 0,
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      nowDay: new Date(),
      showYear: new Date().getFullYear(),
      showMonth: new Date().getMonth()
    };
  },
  mounted() {
    var y = new Date().getFullYear();
    var m = new Date().getMonth() + 1;
    var d = new Date().getDate();
    var dates = y + "," + (m + 1) + "," + d;
    this.maxDate = new Date(dates);
    
  },
  
  watch:{
        defaultDate(val) {
            this.setMinMaxDay();
        },
        showYear(){
          console.log('年份以改变');
          var dateTime = this.showYear+'-'+(this.showMonth+1)+'-'+1;
          GetYear(dateTime).then(res=>{
            console.log(res);
          })
          console.log(dateTime);
        },
        showMonth(){
          console.log('月份以改变');
          var dateTime = this.showYear+'-'+(this.showMonth+1)+'-'+1
           GetYear(dateTime).then(res=>{
            console.log(res);
          })
          console.log(dateTime);
        }
    },
  methods: {
    confirms(date) {
      var time = Math.round(new Date(date).getTime() / 1000).toString();
      console.log(time);
      GetDate(time).then(res => {
        console.log(res);
        this.list = res;
        console.log(this.list);
      });
    },
    scrollToDates(date) {
      console.log(date);
    },

    /* eslint-disable */ 
     formatterDay(day){
            return day;
        },
        slecetDay(day){
             
        },
        // 当前月上一个月
        deMonth() {
            this.monthCont--;
            this.defaultDate = new Date(
                this.year,
                this.month + this.monthCont,
                1
            );
        },
        // 当前月下一个月
        adMonth() {
            this.monthCont++;
            this.defaultDate = new Date(
                this.year,
                this.month + this.monthCont,
                1
            );
        },
        // 当前年上一个年
        deYear() {
            this.yearCont--;
            this.defaultDate = new Date(
                this.year+ this.yearCont,
                this.month,
                1
            );
  
        },
        // 当前年下一个年
        adYear() {
            this.yearCont++;
            this.defaultDate = new Date(
                this.year+ this.yearCont,
                this.month ,
                1
            );
        },
        setMinMaxDay(){
            this.showYear= this.defaultDate.getFullYear();
            this.showMonth = this.defaultDate.getMonth();
            var firstDay = new Date(this.defaultDate);
            firstDay.setDate(1)
            var endDay = new Date(this.showYear,this.showMonth+1,1);
            this.minDate =new Date(
                this.showYear,
                this.showMonth,
                firstDay.getDate()
            )
            endDay.setDate(0)
            this.maxDate =new Date(
                this.showYear,
                this.showMonth,
                endDay.getDate()
            )
        }
    
  },
  
};
</script>

<style lang="scss" scoped>
.list {
  width: 98%;
  height: 2rem;
  background: #fff;
  margin-top: 0.2rem;
  box-sizing: border-box;
  padding: 0.2rem;
  margin-left: 1%;
  border: 0.01rem solid #ccc;
  z-index:999;
  .content {
    .titles {
      background: orange;
    }
    .aa {
      margin-left: 0.2rem;
      margin-right: 0.2rem;
    }
    span {
      display: inline-block;
    }
  }
}
.calendar-wrap::v-deep {
  width: 100%;
  position: relative;
  .van-calendar__month-title {
    display: none;
  }
  .mark-red {
    display: block;
    width: 5px;
    height: 5px;
    background-color: #d46b08;
    border-radius: 50%;
    margin: 0 auto;
  }
  .mark-green {
    display: block;
    width: 5px;
    height: 5px;
    background-color: #389e0d;
    border-radius: 50%;
    margin: 0 auto;
  }
  .month-year {
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
  }
  .arrow {
    position: absolute;
    top: 15px;
    right: 10px;
  }
  .arrow-left {
    position: absolute;
    top: 15px;
    left: 10px;
  }
  .arrow-year {
    position: absolute;
    top: 15px;
    right: 30px;
  }
  .arrow-left-year {
    position: absolute;
    top: 15px;
    left: 30px;
  }
  .arrow-year-1 {
    position: absolute;
    top: 15px;
    right: 35px;
  }
  .arrow-left-year-1 {
    position: absolute;
    top: 15px;
    left: 35px;
  }
}
</style>